<template>
  <div class="container">
    <!-- 下部内容区 -->
    <div class="content">
      <!-- 右侧区域 -->
      <div class="right-panel">
        <div class="panel-header">
          <el-select
            v-model="selectedActivity"
            placeholder="请选择"
            class="activity-select"
            @change="handleActivityChange"
            clearable
          >
            <el-option
              v-for="item in selectData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="panel-middle">
          <div class="middle-stats">
            <div class="stat-item">
              <div class="stat-num"><span class="stat-value">{{ statData.total_send_count }}</span><span class="stat-unit">条</span></div>
              <div class="stat-label-row"><el-icon><VideoCamera /></el-icon><span class="stat-label">视频发布条数</span></div>
            </div>
            <div class="stat-item">
              <div class="stat-num"><span class="stat-value">{{ statData.total_view_count }}</span><span class="stat-unit">次</span></div>
              <div class="stat-label-row"><el-icon><VideoPlay /></el-icon><span class="stat-label">播放量</span></div>
            </div>
            <div class="stat-item">
              <div class="stat-num"><span class="stat-value">{{ statData.total_like_count }}</span><span class="stat-unit">条</span></div>
              <div class="stat-label-row"><el-icon><StarFilled /></el-icon><span class="stat-label">点赞</span></div>
            </div>
            <div class="stat-item">
              <div class="stat-num"><span class="stat-value">{{ statData.total_comment_count }}</span><span class="stat-unit">次</span></div>
              <div class="stat-label-row"><el-icon><ChatDotRound /></el-icon><span class="stat-label">评论</span></div>
            </div>
            <div class="stat-item">
              <div class="stat-num"><span class="stat-value">{{ statData.total_share_count }}</span><span class="stat-unit">次</span></div>
              <div class="stat-label-row"><el-icon><Share /></el-icon><span class="stat-label">转发</span></div>
            </div>
          </div>
        </div>
        <div class="panel-content">
          <!-- 内容区域 -->
          <div class="content-area">
            <!-- 表格视图 -->
            <el-table
              :data="filteredMaterials"
              class="custom-table"
              :row-key="row => row.id"
              border
            >
              <el-table-column prop="title" label="任务名称" />
              <el-table-column  label="发布者" />
              <el-table-column  label="视频" />
              <el-table-column prop="status" label="状态" >
                <template #default="scope">
                  {{ scope.row.status===1?"未发送":"已发送" }}
                </template>
              </el-table-column>
              <el-table-column prop="view_count" label="播放量" />
              <el-table-column prop="comment_count" label="评论" />
              <el-table-column prop="like_count" label="点赞" />
              <el-table-column prop="share_count" label="转发" />
              <el-table-column prop="platform_type" label="发布平台" >
                <template #default="scope">
                  {{ scope.row.platform_type==='douyin'?"抖音":"小红书" }}
                </template>
              </el-table-column>
              <el-table-column prop="create_time" label="发布时间">
                <template #default="scope">
                  {{ formatDate(scope.row.createTime) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="pagination-bar">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handlePageChange"
              @size-change="handleSizeChange"
              class="custom-pagination"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { Search, ArrowDown, Picture, Setting, DataAnalysis, VideoCamera, VideoPlay, StarFilled, ChatDotRound, Share } from '@element-plus/icons-vue'
import axiosUtil from '../../axios-util/axios-util'
import utils from '../../utils/utils';

//主题控制light  dark
const theme = utils.getTheme();

const searchText = ref('')
const materials = ref([])
const selectData = ref([])
const statData = ref<StatData>({
  total_send_count: 0,
  total_view_count: 0,
  total_like_count: 0,
  total_comment_count: 0,
  total_share_count: 0
})
const currentPage = ref(1)
const pageSize = ref(15)
const totalCount = ref(0)
let currentFolderId = ref(0)

const props = defineProps({
  selectedActivityId: {
    type: [String, Number],
    default: null
  }
});

// 监听selectedActivityId变化，自动选中对应活动
watch(() => props.selectedActivityId, (newId) => {
  if (newId && selectData.value.length > 0) {
    const found = selectData.value.find(item => item.id == newId);
    if (found) {
      selectedActivity.value = found.id;
      // 选中活动后，重新加载数据
      currentPage.value = 1;
      initMaterials();
      initStatData();
    }
  }
});

// 监听selectData变化，当数据加载完成后，如果有selectedActivityId，则自动选中
watch(() => selectData.value, (newSelectData) => {
  if (newSelectData.length > 0 && props.selectedActivityId) {
    const found = newSelectData.find(item => item.id == props.selectedActivityId);
    if (found) {
      selectedActivity.value = found.id;
      // 选中活动后，重新加载数据
      currentPage.value = 1;
      initMaterials();
      initStatData();
    }
  }
}, { immediate: true });

// 计算过滤后的数据
const filteredMaterials = computed(() => {
  if (!searchText.value) return materials.value
  return materials.value.filter(item =>
    item.title.toLowerCase().includes(searchText.value.toLowerCase())
  )
})

onMounted(() => {
  initSelectData()
})

const initMaterials = async () => {
  const response = await axiosUtil.post('api/scan_publish/douyin/scan_data_list', {
    id: selectedActivity.value,
    limit: pageSize.value,
    offset: currentPage.value,
    // searchtitle: searchText.value,
  })
  if (response.data.code === 1 && response.data.data) {
    materials.value = response.data.data.list
    totalCount.value = response.data.data.total
  }
}

const initSelectData = async () => {
  const response = await axiosUtil.post('api/scan_publish/douyin/scan_list', {
    limit: 10,
    offset: 1,
    // searchtitle: searchText.value,
  })
  if (response.data.code === 1 && response.data.data) {
    selectData.value = response.data.data.list
    // 数据加载完成后，如果有selectedActivityId，则自动选中
    if (props.selectedActivityId && selectData.value.length > 0) {
      const found = selectData.value.find(item => item.id == props.selectedActivityId);
      if (found) {
        selectedActivity.value = found.id;
      }
    }
    // 在设置完selectedActivity后，初始化材料数据
    initMaterials()
  }
}

const initStatData = async () => {
  const response = await axiosUtil.post('api/scan_publish/douyin/scan_data_statistics', {})
  if (response.data.code === 1 && response.data.data) {
    statData.value = response.data.data
  }
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  initMaterials()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  initMaterials()
}

const handleSearch = () => {
  currentPage.value = 1
  initMaterials()
}

const handleImageTask = () => {
  // 处理图文任务
  console.log('创建图文任务')
}

const handleVideoTask = () => {
  // 处理视频任务
  console.log('创建视频任务')
}

const formatDate = (date: string | number | Date) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

const selectedActivity = ref(null)

const handleActivityChange = () => {
  currentPage.value = 1
  initMaterials()
  initStatData()
}

interface StatData {
  total_send_count: number
  total_view_count: number
  total_like_count: number
  total_comment_count: number
  total_share_count: number
}

</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.content {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.right-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-radius: 12px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  backdrop-filter: blur(10px);
  overflow: hidden;
  height: 100%;
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 1.1em;
  font-weight: bold;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.task-button {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.task-button:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
  transform: translateY(-2px);
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  box-shadow: none !important;
  height: 28px;
}

.search-input :deep(.el-input__inner) {
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
}

.search-input :deep(.el-input__wrapper:hover) {
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  width: 100%;
}

.content-area {
  flex: 1;
  overflow: hidden;
  padding: 16px;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pagination-bar {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  padding: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-top: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
:deep(.el-pagination__total) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}
:deep(.el-pagination__goto) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}
:deep(.el-pagination__classifier) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}
:deep(.el-select__placeholder) {
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

/* 修改滚动条样式 */
.content-area::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
}

.content-area::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.content-area::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.3)"');
}

/* 表格视图样式 */
.custom-table {
  background: transparent !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header th) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.3)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  font-weight: bold !important;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header tr) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__body-wrapper) {
  background: transparent !important;
  overflow-y: auto;
  height: calc(100% - 40px);
}

.custom-table :deep(.el-table__body td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.custom-table :deep(.el-table__row) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  transition: all 0.3s ease !important;
}

.custom-table :deep(.el-table__row:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
  /* transform: translateX(4px); */
}

.custom-table :deep(.el-table__row:hover td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
}

.custom-table :deep(.el-table__cell) {
  background: transparent !important;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 4px;
}

.operation-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.1)" : "rgba(64, 158, 255, 0.2)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"') !important;
  color: v-bind('theme === "light" ? "#409EFF" : "#fff"') !important;
  transition: all 0.3s ease !important;
  white-space: nowrap;
}

.operation-btn:hover {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(64, 158, 255, 0.4)"') !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"') !important;
}

.operation-btn .el-icon {
  font-size: 14px;
  margin-right: 2px;
}

.material-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.material-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

/* 分页样式 */
.custom-pagination :deep(.el-pagination) {
  background: transparent;
}

.custom-pagination :deep(.el-pagination .el-pagination__total),
.custom-pagination :deep(.el-pagination .el-pagination__jump) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .btn-prev),
.custom-pagination :deep(.el-pagination .btn-next) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li.active) {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.task-popover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 0, 0, 0.95)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  backdrop-filter: blur(10px);
  padding: 4px 0 !important;
  min-width: 120px !important;
}

.task-menu {
  display: flex;
  flex-direction: column;
}

.task-menu-item {
  padding: 8px 16px;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
}

.task-menu-item:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.05)" : "rgba(255, 255, 255, 0.1)"');
}

.activity-select {
  width: 200px;
}

.activity-select :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  box-shadow: none !important;
}

.activity-select :deep(.el-input__inner) {
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.activity-select :deep(.el-input__wrapper:hover) {
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
}

.activity-select :deep(.el-select-dropdown) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 0, 0, 0.95)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  backdrop-filter: blur(10px);
}

.activity-select :deep(.el-select-dropdown__item) {
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.activity-select :deep(.el-select-dropdown__item.hover) {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.05)" : "rgba(255, 255, 255, 0.1)"') !important;
}

.activity-select :deep(.el-select-dropdown__item.selected) {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.1)" : "rgba(64, 158, 255, 0.2)"') !important;
  color: v-bind('theme === "light" ? "#409EFF" : "#fff"') !important;
}

.panel-middle {
  padding: 0 16px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: #fff;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  display: flex;
  align-items: center;
  gap: 24px;
  height: 96px;
  position: relative;
}

.middle-bg-img {
  height: 100%;
  width: auto;
  max-height: 90px;
  margin-right: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.middle-stats {
  display: flex;
  flex: 1;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  color: #fff;
}

.stat-item .el-icon {
  font-size: 22px;
  margin-bottom: 0;
  margin-right: 6px;
}

.stat-num {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: baseline;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
}

.stat-unit {
  font-size: 16px;
  margin-left: 2px;
}

.stat-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.stat-label {
  font-size: 16px;
  opacity: 0.95;
}
</style>
